<template>
	<view class="mainCss">
		<view class="titleBox">
			<view class="titleLeft">
				<img src="../../static/title/back.png" class="titleBack" @click="goBack">
			</view>
			<view class="titleText">
				<text>加盟</text>
			</view>
			<view class="titleRight">

			</view>
		</view>
		<view class="selectBox">
			<view class="selectBox1">
				<view class="selectIconBox">
					<img src="../../static/home/select.png" class="selectIcon">
				</view>
				<input type="text" class="selectInput" v-model="selectInfo" placeholder="请输入搜索内容" placeholder-style="color: #DFDFDF;">
			</view>
			<view class="">
				<button class="selectButton">搜索</button>
			</view>
		</view>
		<view class="bodyBox">
			<view class="bannerBox">
				<swiper style="height: 270rpx; border-radius: 10px;" autoplay="true" interval="3000" duration="500"
					circular="true">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<view class="swiper-item">
							<image :src="item.imgUrl" class="banner"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="chooseBox">
				<view class="choose" @click="allType" v-for="(item,index) in leaselise" :key="index" :data-id="item.ID">
					<img src="../../static/join/liveServices.png" class="chooseIcon">
					<text style="font-size: 12px;">{{item.Name}}</text>
				</view>
			</view>
			<view class="joinBox">
				<view class="forList" v-for="(item, index) in joinList" :key="index">
					<view class="infoBox" @click="details">
						<view class="infoTextBox">
							<img src="../../static/home/info.jpg" class="infoImg">
							<span style="display: flex;flex-wrap: wrap; margin-left: 20rpx;">
								<text style="width: 100%; margin: 5rpx;">{{item.title}}</text>
								<text style="width: 100%; margin: 5rpx; font-size: 12px; color: #999999;">{{item.area}}</text>
								<text style="width: 100%; margin: 5rpx; color: #FF0000; font-size: 12px;">
								{{item.money}} 万元</text>
							</span>
							<span style="display: flex; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 50rpx;">
								<text style="width: 100%; color: #FF0000; font-size: 18px; text-align: right;">{{item.price}}万元</text>
								<text style="color: #999999; font-size: 12px;">加盟费</text>
								<text></text>
							</span>
						</view>
						<view class="infoUserBox">
							<span style="display: flex; align-items: center;">
								<img src="../../static/home/touxiang.png" class="userHead">
								<text style="margin-left: 15rpx; color: #999999; font-size: 12px;">发布人</text>
							</span>
							<img src="../../static/lease/more.png" class="moreIcon">
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectInfo: '',
				bannerList: [{
					imgUrl: '../../static/lease/leaseBg.png',
				}, {
					imgUrl: '../../static/lease/leaseBg.png',
				}, {
					imgUrl: '../../static/lease/leaseBg.png',
				}, {
					imgUrl: '../../static/lease/leaseBg.png',
				}],
				type: 0, // 选中id
				chooseText: '请选择行业分类',
				joinList: [{
					title: '测试名称',
					area: '测试区域',
					money: 2,
					price: 1,
					info: '测试简介',
				}, {
					title: '测试名称',
					area: '测试区域',
					money: 2,
					price: 1,
					info: '测试简介',
				}, {
					title: '测试名称',
					area: '测试区域',
					money: 2,
					price: 1,
					info: '测试简介',
				}],
				leaselise:[],
				openid: '',
				Url: 'https://ypsf.huashengzhuan.cn',
				id: '',
			}
		},
		onLoad() {
			this.openid = uni.getStorageSync('OpenID');
			this.$myRequest({
				url: 'getJoinClassify',
				data: {
					},
					dataType: 'json',
			}).then(res => {
				this.leaselise = res.data;
				console.log(this.leaselise)
				
			})
			
		},
		methods: {
			// 返回
			goBack() {
				uni.switchTab({
					url: '/pages/home/index',
				})
			},
			// 首页
			goHome() {
				uni.switchTab({
					url: '/pages/home/index',
				})
			},
			// 跳转到详情页面
			details() {
				uni.navigateTo({
					url: '/pages/join/details',
				})
			},
			// 跳转到加盟分类页面
			allType(event) {
				if ( this.id == event.currentTarget.dataset.id) {
				      return false
				    }
				console.log(event)
				this.id = event.currentTarget.dataset.id
				console.log(this.id)
				uni.navigateTo({
					url: '/pages/join/allType?id=' + JSON.stringify(event.currentTarget.dataset.id),
				})
			},
		}
	}
</script>

<style>
	@import '../../css/join.css';
</style>
